<template>
  <div>
    <pform ref="form" :model="form" lw="150">
      <el-form-item label="可用分区">
        <el-radio-group v-model="form.field1">
          <el-radio label="CCE Standard集群"></el-radio>
          <el-radio label="CCE Turbo集群"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="集群名称">
        <el-input size="small" class="w233" v-model="form.field2" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="集群版本">
        <el-input size="small" class="w233" v-model="form.field3" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="集群规模">
        <el-radio-group v-model="form.field4">
          <el-radio label="50节点"></el-radio>
          <el-radio label="200节点"></el-radio>
          <el-radio label="1000节点"></el-radio>
          <el-radio label="2000节点"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="集群实例数">
        <el-radio-group v-model="form.field5">
          <el-radio label="多实例"></el-radio>
          <el-radio label="单实例"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择系统实例">
        <el-select size="small" class="w233 mr80" v-model="form.field19" placeholder="请选择系统实例">
            <el-option label="ecs1" value="ecs1"></el-option>
            <el-option label="ecs2" value="ecs2"></el-option>
            <el-option label="ecs3" value="ecs3"></el-option>
            <el-option label="phys1" value="phys1"></el-option>
            <el-option label="phys2" value="phys2"></el-option>
            <el-option label="phys3" value="phys3"></el-option>
          </el-select>
      </el-form-item>
      
      <fbr></fbr>
      <el-form-item label="虚拟私有云">
        <div class="flex-c">
          <el-select size="small" class="w233 mr80" v-model="form.field6" placeholder="请选择虚拟私有云">
            <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select size="small" class="w233" v-model="form.field7" placeholder="请选择子网">
            <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <i style="font-size: 25px;margin:0 10px 0 30px;" class="el-icon-refresh-right"></i>
          <div class="btntext">新建虚拟私有云</div>
        </div>
      </el-form-item>
      <el-form-item label="默认安全组">
        <el-radio-group v-model="form.field8">
          <el-radio label="自动生成"></el-radio>
          <el-radio label="选择已有"></el-radio>
        </el-radio-group>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="容器网络模型">
        <el-radio-group v-model="form.field9">
          <el-radio label="VPC网络"></el-radio>
          <el-radio label="容器隧道网络"></el-radio>
          <el-radio label="云原生网络"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="容器网段预留IP数">
        <el-input-number size="small" style="width:215px" v-model="form.field10" :min="1"></el-input-number>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="服务网段">
        <div class="flex-c">
          <el-select size="small" class="w233" v-model="form.field11" placeholder="请选择">
            <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <div class="y-m30">·</div>
          <el-select size="small" class="w233" v-model="form.field12" placeholder="请选择">
            <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <div class="y-m30">·</div>
          <el-input size="small" class="w68" v-model="form.field13" placeholder="0"></el-input>
          <div class="y-m30">·</div>
          <el-input size="small" class="w68" v-model="form.field14" placeholder="0"></el-input>
          <div class="y-m30">/</div>
          <el-select size="small" class="w233" v-model="form.field15" placeholder="请选择">
            <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>

        </div>
      </el-form-item>
      <el-form-item label="服务转发模式">
        <el-radio-group v-model="form.field16">
          <el-radio label="iptables"></el-radio>
          <el-radio label="IPVS"></el-radio>
        </el-radio-group>
      </el-form-item>
    </pform>
  </div>
</template>

<script>
export default{
    data() {
      return {
        form: {
          field1:'CCE Standard集群',
          field2:'',
          field3:'',
          field4:'50节点',
          field5:'单实例',
          field6:'',
          field7:'',
          field8:'自动生成',
          field9:'VPC网络',
          field10:'',
          field11:'',
          field12:'',
          field13:'',
          field14:'',
          field15:'',
          field16:'iptables',
          field17:'',
          field18:'',
          field19:'',
        },
        option:[
          
        ],
        option1:[
          {label:'vpc-default（192.168.0.0/16 ）',value:'1111'},
          {label:'vpc-defadsj（192.168.0.0/16 ）',value:'2222'},
          {label:'虚拟云名称（主网段）',value:'3333'},
        ],
        option2:[
          {label:'自动分配IP',value:'1111'},
          {label:'手动分配IP',value:'2222'},
        ],
        option3:[
          {label:'Sys-FullAccess',value:'1111'},
          {label:'Sys-FullAccess',value:'2222'},
          {label:'安全组名称',value:'3333'},
        ],
      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
    }

  }
</script>

<style scoped lang="less">
.y-m30{
  margin: 0 30px;
}
</style>
